<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas—线性渐变</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
  let canvas = document.querySelector('#canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  let ctx = canvas.getContext('2d');
  let redToGreen = ctx.createLinearGradient(0, 0, 100, 100);
  redToGreen.addColorStop(.3, 'red');
  redToGreen.addColorStop(.6, 'green');
  ctx.strokeStyle = redToGreen;

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(100, 100);
  ctx.closePath();
  ctx.stroke();

  ctx.rect(0, 0, 100, 100);
  ctx.stroke();
  console.log(Math.cos(Math.PI));
  let greenToRed = ctx.createRadialGradient(100, 100, 0, 150, 150, 150);
  greenToRed.addColorStop(0, 'green');
  greenToRed.addColorStop(1, 'red');
  ctx.fillStyle = greenToRed;
  ctx.beginPath();
  ctx.arc(100, 200, 100, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.stroke()
</script>
</html>
